import React from 'react'
import { Breadcrumb, Space } from 'antd'
import styles from './index.less'
import { history, useModel } from 'umi'
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'

const HeaderBreadcrumb: React.FC<Record<string, any>> = ({ props }) => {
    const { initialState, setInitialState } = useModel('@@initialState')
    return (
        <div className={styles.headerBreadcrumb}>
            <Space size='middle'>
                <div
                    onClick={() =>
                        setInitialState({
                            ...initialState,
                            collapsed: !initialState?.collapsed,
                        })
                    }
                    style={{ cursor: 'pointer', fontSize: '16px' }}>
                    {initialState?.collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                </div>
                <Breadcrumb separator='>'>
                    <Breadcrumb.Item href='/'>
                        {initialState?.user?.company?.companyName || '贝图云'}
                    </Breadcrumb.Item>
                    <Breadcrumb.Item href={props.breadcrumb[history.location.pathname].path}>
                        {props.breadcrumb[history.location.pathname].name}
                    </Breadcrumb.Item>
                </Breadcrumb>
            </Space>
        </div>
    )
}
export default HeaderBreadcrumb
